<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>二维变换</title>
	<style>
		.box {
			height: 150px;
			width: 150px;
			background-color: #5D79FC;
			display: inline-block;
			margin-left: 120px;
		}

		.box-2 {
			transform: rotate(45deg);
		}

		.box-3 {
			transform: rotate(45deg);
			transform-origin: 10px 10px;
		}

		.box-4 {
			transform: translate(0, 100%);
		}
	</style>
</head>

<body>

	<div class="box box-1"></div>
	<div class="box box-2">transform: rotate(45deg)</div>
	<div class="box box-3">transform-origin: 10px 10px</div>
	<div class="box box-4">transform: translate(0,100%);</div>

</body>

</html>